<template>
  <div style="height: 600px">
    <div style="display: flex;" class="container-height">
      <div style="width: 200px; padding: 20px" class="box">
        <div style="display: flex;">
          <div style="color: SlateBlue ; font-size: 15px; font-weight: bold;">
            <el-icon style="color: SlateBlue ;vertical-align: middle;margin-right: 3px"><HomeFilled /></el-icon>个人中心
          </div>
        </div>

        <ul>
          <li  @click="changePagePath('myInfo')" :class="pagePath === 'myInfo' ? 'menu-active' : ''"><el-icon class="menu-icon" ><User /></el-icon>个人资料</li>
          <li @click="changePagePath('myDynamic')" :class="pagePath === 'myDynamic' ? 'menu-active' : ''"><el-icon class="menu-icon"><Promotion /></el-icon>我的动态</li>
          <li @click="changePagePath('myPraise')" :class="pagePath === 'myPraise' ? 'menu-active' : ''"><el-icon class="menu-icon"><Pointer /></el-icon>我的点赞</li>
          <li @click="changePagePath('myComments')" :class="pagePath === 'myComments' ? 'menu-active' : ''"><el-icon class="menu-icon"><ChatDotRound /></el-icon>我的评论</li>
          <li @click="changePagePath('myCollect')" :class="pagePath === 'myCollect' ? 'menu-active' : ''"><el-icon class="menu-icon"><CollectionTag /></el-icon>我的收藏</li>
          <li @click="changePagePath('myMessages')" :class="pagePath === 'myMessages' ? 'menu-active' : ''"><el-icon class="menu-icon"><Message /></el-icon>我的消息</li>
          <li @click="changePagePath('myAddress')" :class="pagePath === 'myAddress' ? 'menu-active' : ''"><el-icon class="menu-icon"><LocationInformation /></el-icon>我的地址</li>
          <li @click="changePagePath('myPassword')" :class="pagePath === 'myPassword' ? 'menu-active' : ''"><el-icon class="menu-icon"><Lock /></el-icon>修改密码</li>
        </ul>
      </div>

      <div style="flex: 1; margin-left: 20px; background-color: white" class="box;">
        <MyInfo    v-if="pagePath === 'myInfo'"  />
        <MyDynamic v-if="pagePath === 'myDynamic'" />
        <MyPraise v-if="pagePath === 'myPraise'" />
        <MyComments v-if="pagePath === 'myComments'" />
        <MyCollect v-if="pagePath === 'myCollect'" />
        <MyMessages v-if="pagePath === 'myMessages'" />
        <MyAddress v-if="pagePath === 'myAddress'" />
        <MyPassword v-if="pagePath === 'myPassword'" />
      </div>

    </div>
  </div>

</template>

<script setup>
import { User,Message,Histogram, Lock } from '@element-plus/icons-vue'
import MyInfo from "@/components/MyInfo.vue";
import MyDynamic from "@/components/MyDynamic.vue";
import MyPraise from "@/components/MyPraise.vue";
import MyComments from "@/components/MyComments.vue";
import MyCollect from "@/components/MyCollect.vue";
import MyMessages from "@/components/MyMessages.vue";
import MyAddress from "@/components/MyAddress.vue";
import MyPassword from "@/components/MyPassword.vue";
import { useRoute } from "vue-router";
import router from "@/router";
import {inject} from "vue";

const reload = inject('reload')
const route = useRoute()
const pagePath = route.query.page
const changePagePath = (pagePath) => {
  router.push({ query: {page: pagePath} })  // 触发页面参数的更改 但不生效
  route.query.page = pagePath               // 触发菜单的高亮和页面你内容的更改
  reload()                                  // 重新渲染页面
}

</script>

<style scoped>
.box {
  background-color: white;
  border-radius: 10px;
}
li {
  text-align: center;
  margin: 15px 0;
  cursor: pointer; /*变成小手*/
  font-size: 16px;
}
.menu-icon {
  margin-right: 5px;
  top: 2px
}

.avatar-uploader .avatar {
  display: block;
}

.menu-active {
  color: SlateBlue ;
}
</style>